<template>
	<view class="container">
		<!-- 内容区域包装器 -->
		<view class="content-wrapper">

			<!-- 搜索区域 -->
			<view class="search-box">
				<!-- <view v-if="currentIndex == 2"
					style="display: flex;box-sizing: border-box; align-items: center; padding: 15rpx 30rpx;">
					<image style="width: 32rpx; height: 30rpx;margin-right: 10rpx;" src="../../static/mine/dingwei.png"
						mode=""></image>
					<h5>科穆朗吉萨好的卡号的上的那</h5>
				</view> -->
				<view class="search-box-search" v-if="currentIndex == 1">
					<view class="" style="display: flex; align-items: center;color: #999;">
						<span @click="timeclick" style="margin-right: 20rpx;">{{ page.time?page.time:'全部' }}</span>
						<u-icon name="close" color="#000" size="18/*"  v-if="page.time" @click="timechong"></u-icon>

						<span style="color: #ccc; margin: 0 10rpx;">|</span>
					</view>
					<u-search border="none" placeholder="请输入关键搜索" v-model="page.keyword"  :show-action="false"  @change="changekeword"  :clearabled="false"
						:animation="false" shape="round" bgColor="#FFFFFF" height="72rpx" searchIconColor="#999999"
						placeholderColor="#999999" :inputStyle="{
							color: '#333333',
							backgroundColor: '#FFFFFF',
						}"></u-search>
				</view>
			</view>

			<!-- 筛选区域 -->
			<div class="tablist">
				<div class="tabItem" v-for="(item, index) in tabList" :key="index" @click="onTabChange(index)">
					<p :class="currentIndex === index ? 'active' : ''">
						{{ item.name }}
					</p>
					<span v-if="currentIndex === index"></span>
				</div>
			</div>

			<!-- 商铺列表 -->
			<view class="shop-list" v-if="currentIndex == 0">
				<view class="empty-review" v-if="shopList.length == 0">
					<image src='../static/images/empty-review.png' mode="aspectFit"></image>
				</view>
				<view class="shop-item" v-for="(item, index) in shopList" :key="index" @click="jump(`/pages-landlord/rentcollection/meterreading?id=${item.build_id}&is=${0}`)">
					<!-- 左侧图片区域 -->
					<view class="shop-img-wrap">
						<!-- <view class="shop-tag">商铺</view> -->
						<image :src="item.build_image[0]" mode="aspectFill" class="shop-img"></image>
					</view>
					<!-- 右侧信息区域 -->
					<view class="shop-info">
						<text class="shop-title">{{ item.build_name }}</text>
						<view class="shop-attrs">
							<text>房间数{{ item.total }}套</text>
							<!-- <text>{{ item.area }}m²</text> -->
							<text style="color: #FF0000;">|{{ item.total }}套未查抄</text>
						</view>
						<view class="shop-tags">
							<text v-for="(tag, tagIndex) in item.tag" :key="tagIndex" class="tag">{{ tag }}</text>
						</view>
						<view class="shop-price" >
							<view class="shopprice">
								查看详情
							</view>
							<!-- <text class="price">¥{{ item.price }}</text>
							<text class="unit">/月</text> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 已抄表 -->
			<view v-else>
				<view class="cord" v-for="(item, index) in list" :key="index">
					<view class="meterreading">
						<view class="flex">
							<image style="width: 40rpx; height: 40rpx;margin-right: 12rpx;"
								src="../static/images/fangjianshu.png" mode=""></image>
							<h5>{{ item.room_name }}</h5>
						</view>
						<view class="flex">
							<span style="color: #fe6929;font-size: 25rpx;margin-top: -5rpx;" @click="jump(`/pages-landlord/rentcollection/meterreading?id=${item.id}&is=${1}`)">抄表有误，去修改</span>
							<u-icon size="12" name="arrow-right"></u-icon>
						</view>
					</view>
					<u-divider></u-divider>
					<view class="flex"
						style="font-size: 25rpx; box-sizing: border-box;padding: 10rpx 40rpx; color: #98796b;">
						<view class="flexntextz"  style="width: 25%; text-align: center;">
							费用名称
						</view>
						<view class="flexntext">
							单价（元）
						</view>
						<view class="flexntext">
							数量
						</view>
						<view class="flexntexty" style="width: 25%;text-align: center;">
							总价（元)
						</view>
					</view>
					<view class="flex" 
						style="font-size: 25rpx;margin-top: 20rpx; box-sizing: border-box;padding: 10rpx 40rpx; color: #000;" v-for="(items,indexs) in item.money_data" :key="indexs">
						<view class="flexntextz"  style="width: 25%; text-align: center;">
							{{items.name}}
						</view>
						<view class="flexntext">
							{{ items.price }}
						</view>
						<view class="flexntext">
							<!-- {{ items.num }} -->
							{{convertStringToInteger(items.num)}}
						</view>
						<view class="flexntexty" style="width: 25%; text-align: center;">
							{{ items.money }}
						</view>
					</view>
					<u-divider></u-divider>
					<view class="flexbuttonbox">
						<view class="flexbutton" @click="message(item)">
							通知租客续费
						</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="submitboxbuttons"></view>
				<view class="submitboxbutton">
					<view class="submitbox" @click="sebdmessge">
						一键通知租客
					</view>
				</view>
			</view>
		</view>
		<!-- 日期选择 -->
		<u-datetime-picker ref="datetimePicker" :show="datashow" v-model="value" mode="year-month"
		:formatter="formatter" @cancel="datashow = false" @close="datashow = false" @confirm="datashowclick"></u-datetime-picker>
	</view>
</template>
	
<script>
import {
	biaoHomeownerLists,biaoWeiBuildLists,sendBiaoMessage,sendMessage
} from '@/api/landlord.js'
export default {
	data() {
		return {
			show: false,
			showDropdown: false,
			currentTab: 0,
			datashow:false,
			currentIndex: 0,
			pagefrom:{
				page:1,
				limit:10
			},
			page:{
				page:1,
				limit:10,
				keyword:'',
				time:'',
			},
			list:[],
			tabList: [
				{
					name: '未抄表',
					num: 3
				},
				// {
				// 	name: '待审核',
				// 	num: 0
				// },
				{
					name: '已抄表',
					num: 0
				}
			],
			shopList: [
			],
		};
	},
	onLoad(options) {

	
	},
	onShow() {

		this.pagefrom.page=1
		this.init()
		this.page.page=1
		this.list=[]
		this.shopList=[]
		this.biaoWeiBuildLis()

	},
	async onReachBottom() {
		if(this.currentIndex==0){
			this.pagefrom.page++
			this.init()
		}else{
			this.page.page++
			this.biaoWeiBuildLis()	
		}
		
		},
	methods: {
		timechong(){
		
			this.page.time=''
			this.page.page=1
			this.list=[]
			this.biaoWeiBuildLis()
		},
		 convertStringToInteger(str) {
    return parseInt(str);
},
		datashowclick(e) {
			// 时间选择回调
			const timeFormat = uni.$u.timeFormat;
			let timeValue = timeFormat(e.value, 'yyyy-mm');
			console.log(timeValue);
			this.page.time=timeValue
			this.page.page=1
			this.list=[]
			this.biaoWeiBuildLis()
			this.datashow = false
		},
		
		timeclick(e) {
			// 打开时间弹窗
		
			this.datashow = true
		},
		changekeword(){
			this.page.page=1
			this.list=[]
			this.biaoWeiBuildLis()	
		},
		init() {
			
			biaoWeiBuildLists(this.pagefrom).then(res=>{
				console.log(res.data.data);
				res.data.data.forEach(item=>{
					this.shopList.push(item)
				})
			})
		},
		sebdmessge(){
			sendMessage({}).then(res=>{
				uni.$u.toast(res.data.msg)
			})
		},
		// 路由跳转
		jump(item) {
			uni.navigateTo({
				url: item
			});
		},
		message(e) {
			sendBiaoMessage({ pay_log_id: e.id }).then(res => {
				uni.$u.toast(res.data.msg)
			})
		},
		biaoWeiBuildLis(){
			biaoHomeownerLists(this.page).then(res=>{
	
					res.data.data.forEach(e => {
						this.list.push(e)
					});
			})
		},
		onTabChange(index) {
			if (index == 1) {
				// 获取以抄表列表
				this.page.page=1
				this.list=[]
				this.biaoWeiBuildLis()
			}else if (index==0) {
				this.shopList=[]
				this.pagefrom.page=1
				this.init()
			}
			this.currentIndex = index;
		},
		handleTabClick(index) {
			if (this.currentTab === index) {
				this.showDropdown = !this.showDropdown;
			} else {
				this.currentTab = index;
				this.showDropdown = true;
			}
		},
		selectOption(option) {
			this.filterTabs[this.currentTab].value = option.value;
			this.showDropdown = false;
			// 处理筛选逻辑
		},
		closeDropdown() {
			this.showDropdown = false;
		},
		toShopDetail(item) {
			uni.navigateTo({
				url: `/pages/shop-detail/shop-detail?id=${item.build_id}`,
			});
		},
	},
};
</script>

<style lang="less" scoped>
.flex {
	display: flex;
	height: 40rpx;
	align-items: center;
	justify-content: space-between;
}
.empty-review {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48rpx 0;

	image {
		width: 328rpx;
		height: 208rpx;
		margin-bottom: 24rpx;
	}


}
.flexntext {
	// border: 1rpx solid red;
	text-align: center;
	width: 25%;
}

.flexbuttonbox {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	box-sizing: border-box;
	padding: 0 40rpx;
	height: 60rpx;

	.flexbutton {
		font-size: 25rpx;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		background-color: #fe4f04;
		color: #fff;
	}
}

.submitboxbuttons {
	height: 120rpx;
}

.submitboxbutton {
	position: fixed;
	bottom: 0rpx;
	left: 0;
	width: 100%;
	height: 120rpx;
	background-color: #fff;
}

.submitbox {
	position: fixed;
	bottom: 10rpx;
	left: 50%;
	width: 96%;
	margin: 0 auto;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	margin-left: -48%;
	color: #fff;
	background-color: #fe4f04;
}

.meterreading {
	display: flex;
	box-sizing: border-box;
	padding: 0 40rpx;
	height: 100rpx;
	align-items: center;
	justify-content: space-between;
}

.cord {
	width: 100%;
	margin: 30rpx auto;
	box-sizing: border-box;
	padding: 15rpx;
	background: #fff;
	// border-radius: 15rpx;
}

.search-box-search {
	display: flex;
	border: 1rpx solid #f3f3f3;
	border-radius: 40rpx;
	box-sizing: border-box;
	padding: 0 30rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #606060;
}

.container {
	min-height: 100vh;
	background-color: #f5f6fa;
}

.tablist {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 36px;
	//padding-top: 30rpx;

	background: #fff;

	.tabItem {
		width: 50%;
		height: 35px;
		text-align: center;

		p {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #606060;
		}

		.active {
			font-size: 15px;
			color: #333333;
			font-weight: bold;
		}

		span {
			width: 16px;
			height: 3px;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.35);
			border-radius: 2px;
			display: block;
			margin: 6px auto;
		}
	}
}

.search-box {
	padding: 24rpx 40rpx;
	background: #fff;

	:deep(.u-search) {
		background-color: #ffffff !important;
		border-radius: 36rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		border: 1px solid #EEEEEE;

		.u-search__content {
			background-color: #ffffff !important;
			height: 72rpx;
			padding: 0 30rpx;

			.u-search__content__icon {
				margin-right: 8rpx;
			}

			.u-search__content__input {
				font-size: 28rpx;
			}
		}
	}
}

.filter-tabs {
	position: relative;
	background: #f5f6fa;

	.tab-list {
		display: flex;
		justify-content: space-around;
		padding: 24rpx 0;

		.tab-item {
			display: flex;
			align-items: center;
			position: relative;

			.tab-text {
				font-family: PingFangSC, PingFang SC;
				font-size: 26rpx;
				color: #666666;
				margin-right: 6rpx;

				&.active {
					color: #2979ff;
					font-weight: 500;
				}
			}

			// 添加第一个选项的特殊样式（综合排序）
			&:first-child {
				.tab-text {
					color: #2979ff;
				}
			}
		}
	}

	.dropdown-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 100;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 98;
		}

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.shop-list {
	padding: 24rpx;

	.shop-item {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;

		.shop-img-wrap {
			position: relative;
			width: 240rpx;
			height: 180rpx;
			margin-right: 24rpx;
			flex-shrink: 0;

			.shop-tag {
				position: absolute;
				left: 0;
				top: 0;
				background: #3b7cff;
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 8rpx 0 8rpx 0;
				z-index: 1;
			}

			.shop-img {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.shop-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-width: 0; // 防止文字溢出

			.shop-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				line-height: 40rpx;
				margin-bottom: 12rpx;
				// 文字超出显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.shop-attrs {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 12rpx;

				text {
					position: relative;
					margin-right: 24rpx;

					&:not(:last-child)::after {
						content: "";
						position: absolute;
						right: -12rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 20rpx;
						background: #eeeeee;
					}
				}
			}

			.shop-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;
				margin-bottom: 12rpx;

				.tag {
					font-size: 20rpx;
					color: #4F5963;
					background: #F2F5FB;
					padding: 2rpx 8rpx;
					border-radius: 4rpx;
				}
			}

			.shop-price {
				// border: 1rpx solid red;
				color: #fe5b16;
				display: flex;
				align-items: baseline;
				justify-content: flex-end;
				font-size: 25rpx;

				.shopprice {
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					border: 1rpx solid #fe5b16;
				}

				.price {
					font-size: 32rpx;
					font-weight: 600;
				}

				.unit {
					font-size: 22rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
}
</style>